<template>
  <el-select
    v-model="selectData"
    :placeholder="placeholder"
    :clearable="clearable"
    :multiple="props.multiple"
    @change="change"
    class="select"
    v-bind="propOptions"
  >
    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
    </el-option>
  </el-select>
</template>
<script setup lang="ts">
import { watch, ref } from "vue";

// 定义选项类型
interface SelectOption {
  value: string | number;
  label: string;
}

// 使用带类型的 defineProps
const props = defineProps<{
  modelValue?: string | number | Array<string | number> | null;
  options?: SelectOption[];
  propOptions?: Record<string, any>;
  placeholder?: string;
  clearable?: boolean;
  multiple?: boolean;
}>();

const selectData = ref<string | number | Array<string | number> | null>(null);

watch(
  () => props.modelValue,
  (val) => {
    selectData.value = val ?? null;
  },
  {
    immediate: true,
  },
);

const emit = defineEmits<{
  (e: "change", value: string | number | Array<string | number> | null): void;
  (e: "update:modelValue", value: string | number | Array<string | number> | null): void;
}>();

// 为 val 添加类型注解
function change(val: string | number | Array<string | number> | null) {
  emit("change", val);
  emit("update:modelValue", val);
}
</script>
<style lang="scss" scoped>
.select {
  width: 100%;
}
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  background-color: #b4c3da;
  color: #fff;
}
</style>
